<template>
    <view class="container-wwqypl">
        <div class="form">
            <!-- 游戏区服 -->
            <div class="form-item">
                <text class="label">游戏区服</text>
                <div class="handle" @click="showServerPicker">
                    <view class="selected-tag">
                        {{ selectedServerText || '请选择您所在的区服' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
        </div>

        <!-- Popups -->
        <!-- 游戏区服选择弹窗 -->
        <uni-popup ref="serverPopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择游戏区服</div>
                <div class="body">
                    <scroll-view scroll-y class="popup-nav">
                        <view v-for="(group, groupIndex) in serverTree" :key="groupIndex" class="nav-item"
                            :class="{ active: selectedGroupIndex === groupIndex }" @click="selectGroup(groupIndex)">
                            {{ group.text }}
                        </view>
                    </scroll-view>
                    <scroll-view scroll-y class="popup-scroll">
                        <view v-if="selectedGroupIndex !== null && serverTree[selectedGroupIndex]" class="popup-group">
                            <view v-for="(item, itemIndex) in serverTree[selectedGroupIndex].children" :key="itemIndex"
                                class="popup-item" @click="selectServerItem(item)">
                                {{ item.text }}
                            </view>
                        </view>
                        <view v-else class="popup-empty">请选择左侧分类</view>
                    </scroll-view>
                </div>
                <view class="popup-footer" @click="hideServerPicker">取消</view>
            </view>
        </uni-popup>

        <!-- 订单信息区域 -->
        <div class="orderMsg">
            <div class="pay">
                <image src="../../static/icons/pay.png"></image>
                <div class="text">建议出价 <span class="price-highlight">{{ suggestedPrice }}元</span></div>
            </div>
            <div class="time">
                <image src="../../static/icons/time.png"></image>
                <div class="text">预计时限 <span class="time-highlight">{{ estimatedTime }}小时</span></div>
            </div>
        </div>

        <!-- 底部占位 -->
        <view class="footer-placeholder"></view>

        <!-- 底部按钮 -->
        <div class="footer">
            <div class="tip">代练通全程为您服务</div>
            <div class="button" @click="submitOrder">下一步</div>
        </div>
    </view>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            // Server Selection
            serverTree: [
                {
                    text: '默认区',
                    value: "默认区",
                    children: [
                        { text: '默认服', value: "默认服" },
                    ]
                }
            ],
            selectedServer: "默认服",
            selectedGroupIndex: 0,

            // 表单数据 (替代 Composition API 中的 formData.value)
            formData: {
                server: '',
                // PL 版本可能不需要这么多字段，按需保留
                suggestedPrice: 87, // 示例值
                estimatedTime: 47,  // 示例值
            },
            // 将价格/时间移到 formData 或单独放 data 中
            suggestedPrice: 87,
            estimatedTime: 47,
        };
    },
    computed: {
        selectedServerText() {
            if (this.serverTree && this.serverTree[this.selectedGroupIndex]) {
                return `${this.serverTree[this.selectedGroupIndex].text}/${this.selectedServer}`;
            }
            return ''; // 或 '请选择您所在的区服'
        },
        // PL 版本可能不需要其他计算属性
    },
    mounted() {
        // PL 版本目前没有需要在 mounted 中执行的逻辑
    },
    methods: {
        // --- Popup Show/Hide 通用方法 ---
        showPopup(refName) {
            if (this.$refs[refName]) {
                this.$refs[refName].open();
            } else {
                console.error(`Popup ref '${refName}' not found or not ready.`);
                // uni.showToast({ title: '组件加载中，请稍后重试', icon: 'none' });
            }
        },
        hidePopup(refName) {
            if (this.$refs[refName]) {
                this.$refs[refName].close();
            } else {
                console.error(`Popup ref '${refName}' not found or not ready.`);
            }
        },

        // --- 区服选择方法 ---
        showServerPicker() { this.showPopup('serverPopup'); },
        hideServerPicker() { this.hidePopup('serverPopup'); },
        selectGroup(index) { this.selectedGroupIndex = index; },
        selectServerItem(item) {
            this.selectedServer = item.text;
            this.hideServerPicker();
        },

        // --- 表单校验 (PL 版本简化) ---
        validateForm() {
            if (!this.selectedServerText) {
                uni.showToast({ title: '请选择游戏区服', icon: 'none' });
                return false;
            }
            // PL 版本可能没有其他需要校验的字段
            return true;
        },

        // --- 订单提交 ---
        submitOrder() {
            if (!this.validateForm()) {
                return;
            }

            // 填充 formData 对象
            this.formData = {
                server: this.selectedServerText,
                // 保留价格和时间信息
                suggestedPrice: this.suggestedPrice,
                estimatedTime: this.estimatedTime,
            };

            console.log("准备提交的订单数据 (PL):", this.formData);

            try {
                const queryString = encodeURIComponent(JSON.stringify(this.formData));
                uni.navigateTo({
                    // 注意修改跳转目标页面为 PL 的提交页
                    url: `/pages/SubmitOrder/PL/WWQYsubmitOrder/index?formData=${queryString}`
                });
            } catch (e) {
                console.error("序列化订单数据失败 (PL):", e);
                uni.showToast({ title: '订单数据处理失败', icon: 'error' });
            }
        }
    }
}
</script>

<style>
/* 添加容器样式和底部填充 */
.container-wwqypl {
    padding-bottom: 180rpx; /* 匹配 footer 高度 + tip 高度 */
}

/* 表单样式 (与 DL 保持一致) */
.form {
    width: 100%;
    background-color: #fff;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
}

.form-item {
    margin-bottom: 30rpx;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #f0f0f0;
    padding-bottom: 30rpx;
}
.form-item:last-child {
    border-bottom: none;
}

.form-item .label {
    width: 30%;
    height: 100%;
    display: block;
    font-size: 28rpx;
    color: #333;
}

.form-item .handle {
    width: 70%;
    cursor: pointer;
}

.selected-tag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10rpx;
    height: 50rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #666;
}

.selected-tag image {
    padding-left: 15rpx;
    width: 24rpx;
    height: 24rpx;
}

/* 弹窗样式 (与 DL 保持一致) */
.popup-content {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
}

.popup-content .top {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    padding: 30rpx 20rpx 20rpx;
    border-bottom: 1rpx solid #eee;
}

.popup-content .body {
    max-height: 70vh;
    display: flex;
}

.popup-nav {
    width: 200rpx;
    border-right: 1px solid #eee;
    background-color: #f8f8f8;
    height: 70vh;
}

.nav-item {
    padding: 25rpx 20rpx;
    font-size: 28rpx;
    color: #666;
    text-align: center;
    border-bottom: 1rpx solid #eee;
}
.nav-item:last-child {
    border-bottom: none;
}

.nav-item.active {
    color: #1ba035;
    font-weight: bold;
    background-color: #fff;
}

.popup-scroll {
    flex: 1;
    height: 70vh;
}

.popup-item {
    padding: 25rpx 40rpx;
    font-size: 28rpx;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
    text-align: center;
    cursor: pointer;
}
.popup-item:active {
    background-color: #f0f0f0;
}

.popup-item:last-child {
    border-bottom: none;
}

.popup-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 28rpx;
    color: #999;
}

/* 弹窗底部按钮 (与 DL 保持一致) */
.popup-footer {
    width: 100%;
    text-align: center;
    font-size: 30rpx;
    padding: 25rpx;
    color: #666;
    border-top: 1px solid #eee;
    box-sizing: border-box;
    cursor: pointer;
}
.popup-footer:active {
    background-color: #f0f0f0;
}

/* 订单信息区域 (与 DL 保持一致) */
.orderMsg {
    width: 100%;
    display: flex;
    padding: 30rpx 40rpx;
    box-sizing: border-box;
    background-color: #f8f8f8;
    border-top: 1rpx solid #eee;
    border-bottom: 1rpx solid #eee;
}

.orderMsg .pay,
.orderMsg .time {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orderMsg .pay image,
.orderMsg .time image {
    width: 40rpx;
    height: 40rpx;
    margin-right: 15rpx;
}

.orderMsg .pay .text,
.orderMsg .time .text {
    font-size: 26rpx;
    font-weight: normal;
    color: #666;
}
.price-highlight,
.time-highlight {
    color: red;
    font-weight: bold;
    margin-left: 5rpx;
}

/* 底部占位 (与 DL 保持一致) */
.footer-placeholder {
    height: 180rpx;
}

/* 底部固定区域 (与 DL 保持一致) */
.footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    z-index: 10;
    border-top: 1rpx solid #e0e0e0;
}

.footer .tip {
    width: 100%;
    font-size: 24rpx;
    color: #999;
    background-color: #f8f8f8;
    padding: 15rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.footer .button {
    width: 100%;
    height: 100rpx;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #007aff;
    font-size: 32rpx;
    font-weight: bold;
    cursor: pointer;
}
.footer .button:active {
    background-color: #0056b3;
}
</style>